<template>
  <div>
    <div class="text-color">
      {{ color }}
    </div>
    <button @click="change">切换颜色</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange']

const color = ref(colors[0])

const change = () => {
  const index = colors.indexOf(color.value)
  if (index === colors.length - 1) {
    color.value = colors[0]
  } else {
    color.value = colors[index + 1]
  }
}

</script>
<style lang="scss" scoped>
.text-color {
  color: v-bind(color);
}
</style>
